<template>
    <div id="cesiumContainer"></div>
</template>

<script setup>
import Viewer from '@/viewer/index.js';

import { useViewerStoreHook } from '@/store/viewer';
import { getGeoJsonByCode } from '@/utils/map-geojson/get-geojson';
import * as Cesium from 'cesium';
// 初始化viewer
const viewerStore = useViewerStoreHook();
const { cesiumViewer } = storeToRefs(viewerStore);

onMounted(() => {
    initViewer();
});

onBeforeUnmount(() => {
    if (cesiumViewer.value) {
        // 清理实体、图层和数据源
        cesiumViewer.value.destroy();
        // 清理全局引用
        viewerStore.setCesiumViewer(null);
    }
});

let geojsonLayer; //geojson图层
//初始化地图
const initViewer = function () {
    viewerStore.setCesiumViewer(new Viewer('cesiumContainer'));

    cesiumViewer.value.layer.initLayer();

    const jsonData = getGeoJsonByCode('370000'); //获取JSON数据
    //添加geojson图层
    geojsonLayer = cesiumViewer.value.layer.initGeoJsonLayer({
        geojson: jsonData,
        style: {
            fill: Cesium.Color.fromCssColorString('rgba(0, 122, 204, 0.1)'),
            stroke: Cesium.Color.fromCssColorString('rgba(18, 188, 92, 0.8)'),
            strokeWidth: 0
        }
    });
    cesiumViewer.value.viewer.zoomTo(geojsonLayer); //跳转到geojson图层
};
</script>

<style>
#cesiumContainer {
    width: 100%;
    height: 100%;
}
</style>
